<style lang="scss" scoped>
.cx-steps {
  width: 100%;
}

// 自定义步骤条样式
::v-deep .el-step__title {
  font-size: 14px;
}

::v-deep .el-step__description {
  font-size: 12px;
}

// 可点击样式
.clickable {
  ::v-deep .el-step__head {
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      transform: scale(1.1);
    }
  }
  
  ::v-deep .el-step__title {
    cursor: pointer;
    
    &:hover {
      color: #409eff;
    }
  }
}

// 错误状态样式
::v-deep .el-step.is-error {
  .el-step__icon {
    border-color: #f56c6c;
    color: #f56c6c;
  }
  
  .el-step__title {
    color: #f56c6c;
  }
  
  .el-step__line {
    background-color: #f56c6c;
  }
}
</style>

<template>
  <div class="cx-steps">
    <el-steps
      :active="currentStep"
      :direction="direction"
      :align-center="alignCenter"
      :process-status="processStatus"
      :finish-status="finishStatus"
      :space="space"
      :simple="simple"
      :class="{ clickable: clickable }"
    >
      <el-step
        v-for="(item, index) in stepsList"
        :key="index"
        :title="item.title || item.name || item"
        :description="item.desc || item.description"
        :icon="item.icon"
        :status="getStepStatus(item, index)"
        @click.native="handleStepClick(index, item)"
      />
    </el-steps>
  </div>
</template>

<script>
/**
 * 组件名称: Steps (Element UI 版本)
 * 功能说明: 步骤条组件，基于 Element UI 的 el-steps 组件封装
 * 研发时间: 2025/11/17
 * 研发人员: AI Assistant
 * 
 * 基于 cx2-steps 改造为 Element UI 版本，适配桌面端
 *
 * 参数说明:
 * @prop {Array} list - 步骤列表数据，支持字符串数组或对象数组
 * @prop {Number} current - 当前步骤索引，从0开始
 * @prop {String} direction - 步骤条方向 horizontal|vertical，默认horizontal
 * @prop {Boolean} alignCenter - 标题和描述是否居中对齐，默认false
 * @prop {String} processStatus - 当前步骤的状态 wait|process|finish|error|success，默认process
 * @prop {String} finishStatus - 已完成步骤的状态 wait|process|finish|error|success，默认finish
 * @prop {String|Number} space - 每个步骤的间距，默认自动
 * @prop {Boolean} simple - 是否应用简洁风格，默认false
 * @prop {Boolean} clickable - 步骤是否可点击，默认false
 *
 * 事件说明:
 * @event step-click - 步骤点击事件 {index, item} 点击步骤时触发
 * @event click - 步骤点击事件（别名）
 *
 * 数据格式说明:
 * 字符串数组: ['步骤1', '步骤2', '步骤3']
 * 对象数组: [
 *   { title: '已下单', desc: '10:30', icon: 'el-icon-edit' },
 *   { title: '已出库', desc: '10:35', icon: 'el-icon-upload' },
 *   { title: '运输中', desc: '11:40', error: true, icon: 'el-icon-picture' }
 * ]
 */

/**
 * 修改时间       人员              说明
 * 2025/08/28    郑朝军            创建 uniapp 版本
 * 2025/11/17    AI Assistant      改造为 Element UI 版本
 */

export default {
  name: 'Steps',

  props: {
    // 步骤列表
    list: {
      type: Array,
      default: () => []
    },

    // 当前步骤
    current: {
      type: Number,
      default: 0
    },

    // 方向: horizontal(水平) | vertical(垂直)
    direction: {
      type: String,
      default: 'horizontal',
      validator: (value) => ['horizontal', 'vertical'].includes(value)
    },

    // 标题和描述是否居中对齐
    alignCenter: {
      type: Boolean,
      default: false
    },

    // 当前步骤的状态
    processStatus: {
      type: String,
      default: 'process',
      validator: (value) => ['wait', 'process', 'finish', 'error', 'success'].includes(value)
    },

    // 已完成步骤的状态
    finishStatus: {
      type: String,
      default: 'finish',
      validator: (value) => ['wait', 'process', 'finish', 'error', 'success'].includes(value)
    },

    // 每个步骤的间距
    space: {
      type: [String, Number],
      default: ''
    },

    // 是否应用简洁风格
    simple: {
      type: Boolean,
      default: false
    },

    // 步骤是否可点击
    clickable: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    /**
     * 处理步骤列表数据格式
     * 将字符串数组转换为对象数组
     */
    stepsList() {
      return this.list.map((item, index) => {
        // 如果是字符串，转换为对象格式
        if (typeof item === 'string') {
          return { title: item, name: item }
        }
        // 如果是对象，直接返回
        return { ...item }
      })
    },

    /**
     * 当前步骤索引（边界检查）
     * 确保索引在有效范围内
     */
    currentStep() {
      return Math.max(0, Math.min(this.current, this.stepsList.length - 1))
    }
  },

  methods: {
    /**
     * 获取步骤状态
     * @param {Object} item 步骤项
     * @param {Number} index 步骤索引
     * @returns {String} 步骤状态
     */
    getStepStatus(item, index) {
      // 如果步骤项标记为错误
      if (item.error) {
        return 'error'
      }

      // 如果步骤项有自定义状态
      if (item.status) {
        return item.status
      }

      // 根据当前步骤自动判断状态
      if (index < this.currentStep) {
        return this.finishStatus
      } else if (index === this.currentStep) {
        return this.processStatus
      } else {
        return 'wait'
      }
    },

    /**
     * 处理步骤点击
     * @param {Number} index 步骤索引
     * @param {Object} item 步骤项
     */
    handleStepClick(index, item) {
      // 如果不可点击，直接返回
      if (!this.clickable) {
        return
      }

      this.$emit('step-click', { index, item })
      this.$emit('click', { index, item })
      this.$emit('change', index)
    }
  }
}
</script>
